<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="basic">
        <basic-info-form ref="basicInfo" :info="info" />
      </el-tab-pane>
      <el-tab-pane label="规格信息" name="normInfo">
        <norm-info-form ref="normInfo" :info="info" :tables="tables" :menus="menus"/>
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getGoods, updateGoods } from "@/api/mall/goods";
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
import basicInfoForm from "./basicInfoForm";
import normInfoForm from "./normInfoForm";

export default {
  name: "goodsEdit",
  components: {
    basicInfoForm,
    normInfoForm
  },
  data() {
    return {
      // 选中选项卡的 name
      activeName: "basic",
      // 表信息
      tables: [],
      // 表列信息
      columns: [],
      // 字典信息
      dictOptions: [],
      // 菜单信息
      menus: [],
      // 表详细信息
      info: {}
    };
  },
  created () {
    const goodsId = this.$route.params && this.$route.params.goodsId;
    console.log(goodsId);
    if (goodsId && goodsId !== '0') {
      // 获取表详细信息
      getGoods(goodsId).then(res => {
        console.log(res);
        this.info = res.data;
      });
      /** 查询字典下拉列表 */
      getDictOptionselect().then(response => {
        console.log(response);
        this.dictOptions = response.data;
      });
      /** 查询菜单下拉列表 */
      getMenuTreeselect().then(response => {
        this.menus = this.handleTree(response.data, "menuId");
      });
    }
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      const basicForm = this.$refs.basicInfo.$refs.basicInfoForm;
      const normForm = this.$refs.normInfo.$refs.genInfoForm;
      Promise.all([basicForm, normForm].map(this.getFormPromise)).then(res => {
        const validateResult = res.every(item => !!item);
        if (validateResult) {
          const normTable = Object.assign({}, basicForm.model, normForm.model);
          normTable.columns = this.columns;
          normTable.params = {
            treeCode: normTable.treeCode,
            treeName: normTable.treeName,
            treeParentCode: normTable.treeParentCode,
            parentMenuId: normTable.parentMenuId
          };
          updateGoods(normTable).then(res => {
            this.$modal.msgSuccess(res.msg);
            if (res.code === 200) {
              this.close();
            }
          });
        } else {
          this.$modal.msgError("表单校验未通过，请重新检查提交内容");
        }
      });
    },
    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        });
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/mall/goods", query: { t: Date.now(), pageNum: this.$route.query.pageNum } };
      this.$tab.closeOpenPage(obj);
    }
  }
};
</script>
